<template>
  <div class="type-tree">
    <el-tree
      ref="tree"
      class="tree-content"
      :props="treerule"
      :data="topitemSelectList"
      highlight-current
      check-strictly
      accordion
      :node-key="'equipmentTypeCode'"
      @node-click="handleTreeQuery"
    ></el-tree>
  </div>
</template>

<script>
import equipTypeApi from "@/api/equip-manage/equip-type/index";
import equipModelApi from "@/api/equip-manage/equip-model";

export default {
  props: {
    pageNo: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      treerule: {
        children: "childList",
        label: "equipmentTypeName",
      },
      equipmentTypeCode: "",
      topitemSelectList: [],
      selectedIndex: 0,
    };
  },
  mounted() {
    this.queryParentList();
  },
  methods: {
    queryTable(equipmentTypeCode) {
      console.log("topitemtype");
      this.$emit("topitemtype", equipmentTypeCode, this.equModelArr);
    },
    selectEquModelCode(item) {
      this.$emit("selectEquModelCode", item);
    },
    // 查询最父级的类型
    queryParentList() {
      this.loading = true;
      // 查询表格
      equipTypeApi.queryTree().then((res) => {
        this.loading = false;
        // 赋值数组
        if (res.code === 1) {
          let data = res.data || [];
          this.topitemSelectList = [];
          // for (var i in data) {
          //   this.topitemSelectList.push({
          //     equipmentTypeName: data[i],
          //     equipmentTypeCode: i,
          //   });
          // }
          this.topitemSelectList = data;
          if (this.topitemSelectList.length > 0) {
            this.handleTreeQuery(this.topitemSelectList[0]);
          }
        }
      });
    },
    //查询设备类型下的所有设备
    handleTreeQuery(data) {
      // if (this.equipmentTypeCode === data.equipmentTypeCode) return;

      console.log("handleTreeQuery data", data);
      this.equipmentTypeCode = data.equipmentTypeCode;
      let isChild = true;
      this.selectedIndex = this.topitemSelectList.findIndex((item) => {
        let ret = item.equipmentTypeCode === data.equipmentTypeCode;
        //父类
        if (ret) {
          isChild = false;
          //父分组点+号时，不执行queryEquipModel，父组件的topitemtypeId值会为上一次选中的子分组数据
          item.topitemtypeId = item.equipmentTypeCode;
        } else if (
          item.childList &&
          item.childList.findIndex(
            (item2) => data.equipmentTypeCode === item2.equipmentTypeCode
          ) > -1
        ) {
          //子分组
          ret = true;
          item.equModelCode = item.equipmentTypeCode;
        }
        return ret;
      });
      console.log(
        "handleTreeQuery ",
        this.topitemSelectList,
        this.selectedIndex
        );
        if (isChild) {
          data.topitemtypeId =
          this.topitemSelectList[this.selectedIndex].topitemtypeId;
          data.equModelCode = data.equipmentTypeCode;
          console.log("handleTreeQuery selectedItem", data);
          // this.selectEquModelCode(data);
          // } else if (!data.childList) {
            //   //查询子分组数据
            // } else {
            }
      this.queryEquipModel(data.equipmentTypeCode);
      this.queryTable(data.equipmentTypeCode);
    },
    // 设备模型
    queryEquipModel(equipmentTypeCode) {
      this.loading = false;
      // 获取数据
      equipModelApi.queryAllEquModel(equipmentTypeCode).then((res) => {
        this.loading = false;
        if (res.code === 1) {
          let data = res.data || [];
          this.equModelArr = [];
          // let childList = [];
          for (var i in data) {
            this.equModelArr.push({
              modelName: data[i],
              equModelCode: i,
            });
            // childList.push({
            //   equipmentTypeName: data[i],
            //   equipmentTypeCode: i,
            // });
          }
          // if (this.equModelArr.length > 0) {
          //   this.$set(
          //     this.topitemSelectList[this.selectedIndex],
          //     "childList",
          //     childList
          //   );
          // }
          this.queryTable(equipmentTypeCode);
          // let index = 0;
          // let item = null;
          // this.tableLabel.forEach((el, i) => {
          //   if (el.param === "modelName") {
          //     index = i;
          //     item = el;
          //     item.typeObj.list = this.equModelArr;
          //     console.log("queryAllEquModel item ", item);
          //   }
          // });
          // if (item) this.$set(this.tableLabel, index, item);
          console.log(
            "queryAllEquModel-topitemSelectList",
            this.topitemSelectList
          );
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.type-tree {
  height: 100%;
  width: 100%;
}
.title-content {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  color: #fff;
  background-color: #024e66 !important;
  border: #2f8aa2 1px solid;
  > div {
    text-align: center;
    border-right: #2f8aa2 1px solid;
    &:last-of-type {
      border-right: 0;
    }
  }
}

.tree-content {
  height: calc(100% - 20px);
  overflow-y: auto;
  overflow-x: hidden;
}

::v-deep .el-tree-node__content {
  background-color: #0cb28c !important;
}
.current-hight-line {
  background-color: rgb(12, 178, 140);
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  cursor: pointer;
  &:hover {
    background-color: #0cb28c !important;
    .custom-tree-node-btns {
      display: block !important;
    }
  }
}
</style>
